<script setup lang="ts">
import {message} from "ant-design-vue";
import dayjs, {Dayjs} from "dayjs";
import {PropType} from "vue-demi";
import BatchSelection from "~/contentScripts/views/wxt/components/BatchSelection.vue";
import DateRangeSelection from "~/contentScripts/views/wxt/components/DateRangeSelection.vue";
import {WxtBizCode, WxtPageFields, WxtUtils} from "~/contentScripts/views/wxt/lib/wxtUtils";
import ReportComparisonTable
  from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/ReportComparison/ReportComparisonTable.vue";

// 计划报表
import WxtModal from "~/contentScripts/views/wxt/wxt-modal.vue";

const props = defineProps({
  rows: {
    type: Array,
    default: () => []
  },
  showDate: {
    type: Boolean,
    default: true,
  },
  dateRange: {
    type: Array as PropType<Dayjs[]>,
    default: () => []
  },
  bizCode: {
    type: String as PropType<WxtBizCode>,
    default: ''
  },
  pageFields: {
    type: String as PropType<WxtPageFields>,
    default: () => []
  }
});
const date = ref<Dayjs[]>([])
const visible = ref(false);
watch(() => visible.value, (v) => {
  if (v) {
    date.value = props.dateRange;
  }
})
date.value = props.dateRange;
const emit = defineEmits([
  "update:visible",
  "close",
]);
const loading = ref(false);
const handle = () => {
  if (props.rows.length === 0) {
    message.error("请选择需要批量处理的数据！");
    return;
  }
  visible.value = true;
  loadReport();
};
const data = ref<any[]>([]);
const loadReport = () => {
  if (date.value.length === 0) {
    date.value = props.dateRange;
  }
  loading.value = true;
  const campaignIds: string[] = props.rows.map((r: any) => r.campaignId);
  WxtUtils.reportQuery(campaignIds, date.value[0].format('YYYY-MM-DD'), date.value[1].format('YYYY-MM-DD'), props.bizCode, props.pageFields?.split(',')).then(res => {
    res.data.data.list.forEach((l: any, index: number) => {
      l.index = index + 1;
      if (typeof l.hourId !== 'undefined') {
        l.thedate = dayjs(l.thedate).format('YYYY-MM-DD') + ' ' + l.hourId + ':00';
      }
      // 间接ROI
      l.indirRoi = l.roi - l.dirRoi;
      // 直接转化率
      l.dirCvr = l.alipayDirNum / l.click;
      // 间接转化率
      l.indirCvr = l.alipayIndirNum / l.click;

      // 直接加购率
      l.dirAddRate = l.cartDirNum / l.click;
      // 间接加购率
      l.indirAddRate = l.cartIndirNum / l.click;

      // 直接收藏率
      l.dirFavRate = l.itemColDirNum / l.click;
      // 间接收藏率
      l.indirFavRate = l.itemColIndirNum / l.click;
      //  直接收藏加购率
      l.dirFavAddRate = l.dirFavRate + l.dirAddRate;
      // 间接收藏加购率
      l.indirFavRate = l.indirFavRate + l.indirAddRate;
    });
    console.log(res);
    data.value = res.data.data.list;
  }).finally(() => {
    loading.value = false;
  });
};
watch(() => date.value, (v) => {
  console.log(v);
  loadReport();
})
const columns = ref([]);
</script>

<template>
  <div @click="handle">
    <slot>
      <a-button size="small" type="primary" ghost>计划报表</a-button>
    </slot>
  </div>
  <wxt-modal title="计划报表" v-model:visible="visible" width="100vw" style="top: 10px;">
    <div style="height: calc(100vh - 100px);display: flex;flex-direction: column;">
      <a-row style="padding-bottom: 10px;" type="flex" :gutter="10" v-if="showDate">
        <a-col>
          <a-space>
            <DateRangeSelection name="日期" :value="dateRange" @change="(d)=>date=d"/>
          </a-space>
        </a-col>
        <a-col flex="1">
          <span style="font-size: 12px;color: #666;"
          >{{ rows.length }}个计划：{{ rows.map((r: any) => r.campaignName).join(' | ') }}</span>
        </a-col>
      </a-row>
      <div style="flex: 1">
        <ReportComparisonTable :data="data" :loading="loading"/>
      </div>
    </div>
  </wxt-modal>
</template>

<style scoped>

</style>
